import React from 'react';
import {
  Table,
  Icon,
  Button,
  Tooltip,
  Row,
  Col,
  Input,
  Select,
  DatePicker,
  Cascader,
  Radio,
  Dropdown,
  Menu,
  Checkbox,
  Steps,
  Modal,
  Form,
  Pagination,
  Popconfirm,
  Timeline,
  Tabs
} from 'antd';
import MyIcon from '../../components/common/MyIcon/MyIcon';
import AddressSelect from '../../components/common/AddressSelect/AddressSelect';//省市级联

//常用组件引用
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const {MonthPicker, RangePicker} = DatePicker;//日历
const Step = Steps.Step;                //步骤条
const Search = Input.Search;    //搜所框
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const TabPane = Tabs.TabPane;

import data from './data';
import CepingInfo from '../info/index';  //测评详情



export default class ListCeping extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowSearch: false,  // 搜索下拉
      Colvisible: false,       // 更改列显示
      Statistics:false,     //查看提示
      //右侧滑层
      isShowRightCepingInfo: false,      //月嫂详情
    };
  }

  //搜索下拉
  SearchToggle = (e) => {
    this.setState({
      'isShowSearch': !this.state.isShowSearch,
    })
  }
  //更改列显示
  handleMenuClick = (e) => {
    if (e.key === '3') {
      this.setState({Colvisible: false});
    }
  }
  handleVisibleChange = (flag) => {
    this.setState({Colvisible: flag});
  }
  //---右侧滑层
  //订单详情
  RightCepingInfo = (e) => {
    this.setState({
      'isShowRightAuntAdd': false,
      'isShowRightCepingInfo': !this.state.isShowRightCepingInfo,
    })
  }
  RightCepingInfoClose = (e) => {
    this.setState({
      'isShowRightCepingInfo': false,
    })
  }
  //查看统计
  Statistics=(e)=>{
    this.setState({
      'Statistics': !this.state.Statistics,
    })
  }
  StatisticsClose=(e)=>{
    this.setState({
      'Statistics': false,
    })
  }

  render() {
    //修改列显示
    const menu = (
      <Menu>
        <Menu.Item key="1">更改级别</Menu.Item>
        <Menu.Item key="2">移入黑名单</Menu.Item>
        <Menu.Item key="3">移出黑名单</Menu.Item>
      </Menu>
    );
    let that = this;
    let CepingList = data.CepingListTable;
    let {sortedInfo, filteredInfo} = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [
      {
        title: '测评编号',
        dataIndex: 'id',
        key: 'id',
        className: 'ant-table-th-center',
        render: (value) => {
          return (
            <div className="table-a-cont">
              <a href="javascript:void(0);" onClick={that.RightCepingInfo}>{value}</a>
            </div>
          )
        },
      },
      {
        title: '线索单号',
        dataIndex: 'xiansuo',
        key: 'xiansuo',
        className: 'ant-table-th-center'
      },
      {
        title: '客户姓名',
        dataIndex: 'Name',
        key: 'Name',
        className: 'ant-table-th-center',
      }, {
        title: '联系方式',
        dataIndex: 'Phone',
        key: 'Phone',
        render: (value) => {
          return (
            <div className="table-contact">
              <Tooltip placement="top" title={value}>
                <span className="phone-span"><MyIcon type="phone"/></span>
              </Tooltip>
            </div>
          )
        },
        className: 'ant-table-th-center'
      }, {
        title: '孕产状态',
        dataIndex: 'state',
        key: 'state',
        className: 'ant-table-th-center'
      }, {
        title: '是否哺乳',
        dataIndex: 'buru',
        key: 'buru',
        className: 'ant-table-th-center'
      }, {
        title: '测评时间',
        dataIndex: 'time',
        key: 'time',
        className: 'ant-table-th-center',
      }, {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        className: 'ant-table-th-center',
        render: () => {
          return (
            <div className="table-a-cont">
              <a href="javascript:void(0)" onClick={() => this.showModalDistribution(true)}>认证</a>
            </div>
          )
        },
      }
    ];
    const pagination = {
      // total: this.state.tDate.length,
      total: 50,
      showSizeChanger: false,
      defaultPageSize:5,
    }
    return (
      <div>
        <h3 className="title-h3">测评管理</h3>
        {/*搜索*/}
        <div className="search-cont">
          <Row gutter={16}>
            <Col span="4">
              <Input placeholder="请输入测评编号" size="large"/>
            </Col>
            <Col span="4">
              <Input placeholder="请输入线索单号" size="large"/>
            </Col>
            <Col span="4">
              <Input placeholder="请输入客户姓名/手机号" size="large"/>
            </Col>
            <Col span="4">
              <Select defaultValue="请选择孕产状态" size="large">
                <Option value="请选择孕产状态">请选择孕产状态</Option>
                <Option value="备孕期">备孕期</Option>
                <Option value="怀孕期">怀孕期</Option>
                <Option value="产后期">产后期</Option>
              </Select>
            </Col>
            <Col span="4">
              <Select defaultValue="请选择是否哺乳" size="large">
                <Option value="请选择是否哺乳">请选择是否哺乳</Option>
                <Option value="是">是</Option>
                <Option value="否">否</Option>
              </Select>
            </Col>
            <div className="search-btncont search-btncontfr">
              <ButtonGroup>
                <Button size="large" type="primary">搜索</Button>
                <Button size="large" type="primary" onClick={this.SearchToggle}>
                  <Icon type={this.state.isShowSearch ? 'up' : 'down'}/>
                </Button>
              </ButtonGroup>
            </div>
          </Row>
          <div className={this.state.isShowSearch ? 'search-more' : 'search-more dis-n'}>
            <Row gutter={16}>
              <Col span="8">
                <RangePicker
                  size="large"
                  showTime
                  format="YYYY/MM/DD HH:mm:ss"
                />
              </Col>
              <Col span="4">
                <div className="time-a-cont">
                  <a className="time-a">今天</a>
                  <a className="time-a">昨天</a>
                  <a className="time-a">近一周</a>
                  <a className="time-a">近一月</a>
                </div>
              </Col>
            </Row>
          </div>
        </div>
        {/*按钮*/}
        <div className="search-cont2">
          <ButtonGroup>
            <Button onClick={that.RightAuntAdd}>新增 * *</Button>
            <Button onClick={that.Statistics}>查看统计</Button>
            <Dropdown overlay={menu} onVisibleChange={this.handleVisibleChange}
                      visible={this.state.Colvisible}>
              <Button>
                更改列显示 <Icon type="down"/>
              </Button>
            </Dropdown>
          </ButtonGroup>
        </div>
        {/*统计*/}
        <div className={this.state.Statistics ? 'statistics' : 'statistics dis-n'}>
          <a href="javascript:void(0)" className="statistics-close" onClick={this.StatisticsClose}>
            <Icon type="close-square" />
          </a>
          <Row gutter={16}>
            <Col span={4}>统计：<span className="num">10000</span></Col>
            <Col span={4}>统计：<span className="num">10000</span></Col>
            <Col span={4}>统计：<span className="num">10000</span></Col>
            <Col span={4}>统计：<span className="num">10000</span></Col>
            <Col span={4}>统计：<span className="num">10000</span></Col>
            <Col span={4}>统计：<span className="num">10000</span></Col>
            <Col span={4}>统计：<span className="num">10000</span></Col>
            <Col span={4}>统计：<span className="num">10000</span></Col>
          </Row>
        </div>
        {/*表格*/}
        <Table columns={columns} bordered
               dataSource={CepingList.toJS()} pagination={pagination}
               scroll={{ x: 1200}}
        />
        {/*详情*/}
        <div
          className={this.state.isShowRightCepingInfo ? 'rightSlip rightSlip-nofoot animated fadeInRight' : 'rightSlip rightSlip-nofoot animated fadeOutRight'}>
          <a href="javascript:void(0)" className="rightSlipClose"
             onClick={this.RightCepingInfoClose}><Icon type="close"/></a>
          <CepingInfo />
        </div>
      </div>
    )
  }
}
